<template>
    <div>
        <van-list  v-model="loading"  :finished="finished"  finished-text="没有更多了"  @load="getData">
            <ul class="list-container">
                <li class="shop-list" v-for="store in storelist" :key="store.id">
                    <div class="img-box">
                        <img :src="store.img" alt="">
                    </div>
                    <div class="info-box" >
                        <div class="title">{{store.name}}</div>
                        <div class="rate-box">
                            <div>
                                <stars :score="store.score"></stars>
                                <span class="rate">{{store.score}}分</span>
                                <span>月销{{store.num}}</span>
                            </div>
                            <div>
                                <span>{{store.minute}}分钟</span>
                                <span class="left-line">{{store.distance}}</span>
                            </div>
                        </div>
                        <div class="distribution-box">
                            <span>起送{{store.per_capita}}</span>
                            <span class="left-line">配送{{store.fee}}</span>
                            <span class="left-line">人均{{store.price}}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </van-list>
    </div>
</template>

<script>
    import star from '@/components/star';
    import {getStore} from '@/api/home'

    export default {
        data(){
            return {
                current: 0,
                size: 6,
                storelist: [],
                loading: false,
                finished: false,
                total: 0
            }
        },
        components: {
            stars: star
        },
        methods: {
            //获取商家列表数据
            getData(){
                getStore({
                    current: this.current,
                    size: this.size
                }).then(res=>{
                    // this.storelist = res.data.list;
                    //每次调用后，需要将新加载出来的数据拼接到之前的数据之后 使用数组方法 concat（）
                    this.storelist = this.storelist.concat(res.data.list);
                    this.loading = false;
                    this.current++;
                    this.total = res.data.total;
                    if(this.storelist.length >= this.total){
                        this.finished = true;
                    }
                })
            }
        },
        //使用vant库的vanlist组件，实现滑动屏幕到底部时自动加载新的数据，因一进入页面也会加载，所以此处不用再使用created生命周期钩子函数调用了
        // created(){
        //     this.getData();
        // }
    }
</script>

<style lang="scss" scoped>
.list-container{
    padding: 0 0.2rem;
    .shop-list{
        margin: 0.2rem 0 0.5rem 0;
        display: flex; //弹性盒模型
        .img-box{
            width: 1.52rem;
            height: 1.14rem;
            margin-right: 0.16rem;
            img{
                width: 100%;
                height: 100%;
            border-radius: 0.1rem;
            }
        }
        .info-box{
            flex: 1; 
                     //flex: 1; === flex: 1 1 任意数字+任意长度单位;
                     //第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
                     //第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
                     //第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小。如果随便设置一个其他带有长度单位的数字呢, 那么他就不会按项目本身来计算, 所以它不关心内容, 只是把空间等比收缩和放大
            .title{
                font-size: 0.32rem;
                color: #333;
                line-height: 1.4; //1.4倍的行高
                font-weight: 600;
            }
            .rate-box,
            .distribution-box{
                display: flex;
                color: #333;
                line-height: 1.4;
                font-family: mtsi-font;
                font-size: 11px;
                .rate{
                    margin-right: 0.2rem;
                }
                .left-line::before{
                    content: "";
                    display: inline-block;
                    width: 1px;
                    height: 10px;
                    margin: 0 5px;
                    background: rgb(110, 110, 110);
                }
            }
            .rate-box{
                justify-content: space-between;
            }
        }
    }
}
</style>